<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var reNumber = /^\d+$/
        function f() {
            var arr = document.getElementsByName("zdjs");
            if (arr[0].checked==true){
                var index;
                var arrr = new Array();
                var num = document.getElementById('sl').value;
                var price = document.getElementById('dj').value;
                var xj = parseInt(num)*parseFloat(price);
                document.getElementById('xj').value = xj.toFixed(2);
                var ar = document.getElementsByName('xm');
                var zfc,zj =0 ;
                for (var i = 0; i < ar.length; i++) {
                    if (ar[i].checked==true){
                        zfc = document.getElementsByClassName(ar[i].className)[1].innerHTML;
                        var brr = zfc.split("");
                        for (var j = 0; j < brr.length; j++) {
                            if (reNumber.test(brr[j])) {
                                index = j;
                                break;
                            }
                        }
                        var nu = zfc.substring(0,zfc.length-1);
                        nu = nu.substring(j);
                        arrr.push(nu);
                    }
                }
                for (var i = 0; i < arrr.length; i++) {
                    zj+=parseInt(arrr[i])+xj;
                }
                document.getElementById('zj').value = zj.toFixed(2);
            }
        }
    </script>
</head>
<body>
    <div style="border-top: 1px solid;width: 70%"><br>
        数量:<input type="text" id="sl">单价:<input type="text" id="dj"><br><br>
        小计:<input type="text" id="xj"><br><br>
        选购项目:<input type="checkbox" name="xm" id="gq" class="a"><font class="a">光驱500元</font>
        <input type="checkbox" name="xm" id="yp" class="b"><font class="b">硬盘500元</font>
        <input type="checkbox" name="xm" id="xsq" class="c"><font class="c">显示器1500元</font>
    </div>
    <br><br>
        <input type="checkbox" name="zdjs" onclick="f()">自动计算<br><br>
        总价:<input type="text" id="zj">
</body>
</html>